<template>
  <div>
    <!-- 面包屑导航区域 -->
    <div class="bread_box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        <el-breadcrumb-item>评论列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-form
        class="search_from"
        size="small"
        inline="true"
        label-width="70px"
      >
        <el-form-item label="文章名称">
          <el-input placeholder="请输入文章名称"></el-input>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item label="评论时间">
          <el-date-picker
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini">重置</el-button>
        </el-form-item>
      </el-form>

      <div>
        <el-button type="primary" icon="el-icon-plus" size="mini"
          >新增</el-button
        >
        <el-button type="success" icon="el-icon-edit" size="mini"
          >修改</el-button
        >
        <el-button type="danger" icon="el-icon-delete" size="mini"
          >删除</el-button
        >
        <el-button type="warning" icon="el-icon-download" size="mini"
          >导出</el-button
        >
      </div>

      <el-table
        ref="multipleTable"
        :data="commentList"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="expand" label="详细">
          <template slot-scope="scope">
            <!-- {{scope.row.list}} -->
            <span><strong>子评论详细</strong></span>
            <el-table
              :data="scope.row.list"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column width="40px"></el-table-column>
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="fromName" label="回复人"></el-table-column>
              <el-table-column prop="ip" label="主机"> </el-table-column>
              <el-table-column
                prop="content"
                label="回复内容"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column prop="likes" label="点赞"> </el-table-column>
              <el-table-column
                prop="created"
                label="回复时间"
              ></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="comment.author" label="昵称"></el-table-column>
        <el-table-column prop="comment.ip" label="主机"> </el-table-column>
        <el-table-column prop="articleName" label="文章名称"> </el-table-column>
        <el-table-column label="显示">
          <template slot-scope="">
            <!-- {{scope.row}} -->
            <el-switch v-model="value" disabled> </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="comment.content"
          label="评论内容"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="comment.likes" label="点赞"> </el-table-column>
        <el-table-column
          prop="comment.created"
          label="评论时间"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showDetail(scope.row)"
              ><i class="el-icon-view"></i><span>详情</span></el-button
            >
            <!-- <el-button type="text" size="mini"
              ><i class="el-icon-edit"></i><span>修改</span></el-button
            >
            <el-button type="text" size="mini"
              ><i class="el-icon-delete"></i><span>删除</span></el-button
            > -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.cur"
        :page-sizes="[4, 8, 10, 20]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 评论详情Dialog -->
    <el-dialog title="评论详细" :visible.sync="detailDialogVisible">
      <el-form
        label-width="100px"
        :model="commentDetailForm"
        class="commentDetailForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="IP：">{{ commentDetailForm.ip }}</el-form-item>
            <el-form-item label="昵称：">{{
              commentDetailForm.author
            }}</el-form-item>
            <el-form-item label="OS：">Windows 10</el-form-item>
            <el-form-item label="浏览器：">Chrome 8</el-form-item>
            <el-form-item label="评论URL："
              >https://www.yidiandian.com/</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="点赞：">{{
              commentDetailForm.likes
            }}</el-form-item>
            <el-form-item label="显示：">
              <template>
                <el-switch v-model="detailDialogVisible"> </el-switch>
              </template>
            </el-form-item>
            <el-form-item label="评论文章：">{{
              commentDetailForm.articleName
            }}</el-form-item>
            <el-form-item label="评论时间：">{{
              commentDetailForm.created
            }}</el-form-item>
            <el-form-item label="评论内容：">{{
              commentDetailForm.content
            }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取评论列表参数
      pageInfo: {
        cur: 1,
        size: 4
      },
      total: 0,
      // 评论列表
      commentList: [],
      // 文章详情Dialog
      detailDialogVisible: false,
      // 文章详情表单
      commentDetailForm: {
        author: '',
        ip: '',
        likes: 0,
        articleName: '',
        created: '',
        content: ''
      },
      // 暂时绑定switch
      value: ''
    }
  },
  methods: {
    // 获取评论列表
    async getCommentList () {
      const { data: res } = await this.$http.get('/comment/commentPageAdmin', { params: this.pageInfo })
      console.log('获取评论列表', res)
      if (res.code !== 200) return
      this.commentList = res.data.list
      this.total = res.data.total
    },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
      //   console.log(newSize)
      this.pageInfo.size = newSize
      this.getCommentList()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
      //   console.log(newCur)
      this.pageInfo.cur = newCur
      this.getCommentList()
    },
    // 打开文章详情Dialog
    showDetail (info) {
      this.detailDialogVisible = true
      this.commentDetailForm.author = info.comment.author
      this.commentDetailForm.ip = info.comment.ip
      this.commentDetailForm.likes = info.comment.likes
      this.commentDetailForm.articleName = info.articleName
      this.commentDetailForm.created = info.comment.created
      this.commentDetailForm.content = info.comment.content
    }
  },
  created () {
    this.getCommentList()
  }
}
</script>

<style lang="less" scoped>
</style>

<style lang="less">
.commentDetailForm {
  // 改变el-form的label
  .el-form-item {
    .el-form-item__label {
      font-weight: 700 !important;
      line-height: 24px !important;
    }
    .el-form-item__content {
      line-height: 24px !important;
    }
  }
}
</style>
